<template>
  <div class="login">
    <div class="login_head">
      <div class="login_title">南山区统一预约平台</div>
    </div>
    <div class="login_form">
      <!-- <div class="login_type">
        <div
          class="type"
          :class="{ active: loginType == 'SMS_CODE' }"
          @click="changeLogin('SMS_CODE')"
        >
          手机号登录
        </div>
        <div
          class="type"
          :class="{ active: loginType == 'USER_CODE' }"
          @click="changeLogin('USER_CODE')"
        >
          身份证号登录
        </div>
      </div> -->
      <div class="form_box">
        <div v-if="loginType == 'USER_CODE'">
          <div class="nyy_cell">
            <div class="nyy_cell_label">
              <img alt="" class="icon" src="~/images/user_icon.png" />
            </div>
            <div class="nyy_cell_value">
              <div class="body">
                <input
                  v-model="form.name"
                  class="nyy_input"
                  placeholder="请输入姓名"
                  type="text"
                />
              </div>
            </div>
          </div>
          <div class="nyy_cell">
            <div class="nyy_cell_label">
              <img alt="" class="icon" src="~/images/card_icon.png" />
            </div>
            <div class="nyy_cell_value">
              <div class="body">
                <input
                  v-model="form.cardNo"
                  class="nyy_input"
                  maxlength="18"
                  placeholder="请输入身份证号"
                  type="text"
                />
              </div>
            </div>
          </div>
        </div>
        <div v-if="loginType == 'SMS_CODE'">
          <div class="nyy_cell">
            <div class="nyy_cell_label">
              <img alt="" class="icon" src="~/images/mobile_icon.png" />
            </div>
            <div class="nyy_cell_value">
              <div class="body">
                <input
                  v-model="form.phone"
                  class="nyy_input"
                  maxlength="11"
                  placeholder="请输入手机号"
                  type="text"
                />
              </div>
            </div>
          </div>
          <div class="nyy_cell">
            <div class="nyy_cell_label">
              <img alt="" class="icon" src="~/images/lock_icon.png" />
            </div>
            <div class="nyy_cell_value">
              <div class="body">
                <input
                  v-model="form.smsCode"
                  class="nyy_input"
                  placeholder="请输入验证码"
                  style="width: 150px"
                  type="text"
                />
                <span v-if="sms_s == 0" class="button" @click="sendSms">
                  获取验证码
                </span>
                <span v-else class="button">{{ sms_s }}s</span>
              </div>
            </div>
          </div>
        </div>
        <div class="login_btn" @click="login">登录</div>
        <div class="no_user">
          还没账号？
          <span @click="goRegister">立即注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { isPhone, isIdCard } from '@/utils/validate'
  import api from '@/api'
  export default {
    name: 'Login',
    data() {
      return {
        loginType: 'SMS_CODE', //USER_CODE
        form: {
          name: '',
          cardNo: '',
          phone: '',
          smsCode: '',
          loginType: '',
        },
        sms_s: 0,
        settimer: null,
        redirect: '',
      }
    },
    mounted() {
      console.log(encodeURIComponent('http://baidu.com'))
      const { redirect } = this.$route.query
      this.redirect = redirect
    },
    methods: {
      changeLogin(key) {
        this.loginType = key
      },
      sendSms() {
        if (this.sms_s != 0) {
          return
        }
        if (this.form.phone == '') {
          this.$toast('请填写手机号')
          return false
        }
        if (!isPhone(this.form.phone)) {
          this.$toast('请填写合法手机号')
          return false
        }
        api.user.sendSms({ phone: this.form.phone, function: 'login' })
        this.sms_s = 60
        let that = this
        that.settimer = setInterval(function () {
          if (that.sms_s <= 1) {
            that.sms_s = 0
            clearInterval(that.settimer)
            return
          }
          that.sms_s--
        }, 1000)
      },
      login() {
        if (this.loginType == 'SMS_CODE') {
          if (this.form.phone == '') {
            this.$toast('请输入手机号')
            return false
          }
          if (!isPhone(this.form.phone)) {
            this.$toast('请输入合法手机号')
            return false
          }
          if (this.form.smsCode == '') {
            this.$toast('请输入短信验证码')
            return false
          }
        }
        if (this.loginType == 'USER_CODE') {
          if (this.form.name == '') {
            this.$toast('请输入姓名')
            return false
          }
          if (this.form.cardNo == '') {
            this.$toast('请输入身份证号')
            return false
          }
          if (!isIdCard(this.form.cardNo)) {
            this.$toast('请输入合法身份证号')
            return false
          }
        }
        this.form.loginType = this.loginType
        api.user.login(this.form).then((res) => {
          const { token, expiresIn, secret, qrCode } = res
          let url = decodeURIComponent(this.redirect)
          let has = url.indexOf('?') != -1 ? true : false
          url += has ? '&' : '?'
          url += 'token=' + token
          url += '&expiresIn=' + expiresIn
          url += '&secret=' + secret
          url += '&qrCode=' + encodeURIComponent(qrCode)
          // console.log(url)
          window.location.replace(url)
        })
      },
      goRegister() {
        this.$router.push({
          path: '/register',
          query: { redirect: this.redirect },
        })
      },
    },
  }
</script>

<style>
  .login_head {
    width: 100%;
    height: 262px;
    background-image: url('~images/login_back.png');
    background-size: 100% 100%;
  }
  .login_title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    padding-top: 70px;
  }
  .login_form {
    width: calc(100% - 80px);
    padding: 0 40px;
  }
  .login_type {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
  }
  .login_type .type {
    width: 120px;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    color: #bbbbbb;
    text-align: center;
  }
  .login_type .active {
    color: #4295ff;
    border-bottom: 1px solid #4295ff;
  }
  .form_box {
    margin-top: 30px;
  }
  .login_btn {
    width: 288px;
    height: 48px;
    line-height: 48px;
    font-size: 17px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(0deg, #4093ff, #4193ff);
    box-shadow: 0px 9px 12px 0px rgba(63, 143, 255, 0.23);
    border-radius: 24px;
    margin: auto;
    margin-top: 66px;
  }
  .no_user {
    width: 100%;
    text-align: center;
    margin-top: 34px;

    font-size: 14px;
    color: #999999;
  }
  .no_user span {
    color: #4193ff;
    text-decoration: underline;
  }
</style>
